<template>
	<view class="view-contain">
		<public-module leftIcon="arrow-left" :title="title" />
		
		<!-- 计算方法选择页面 -->
		<view class="method-selection">
			<view class="method-cards">
				<view v-for="(method, index) in calculationMethods" :key="index" class="method-card"
					:class="{ 'selected': selectedMethod === index }" @click="selectMethod(index)">
					<view class="method-info">
						<text class="method-title">{{ method.title }}</text>
						<text class="method-desc">{{ method.description }}</text>
						<text class="method-example">{{ method.example }}</text>
					</view>
				</view>
			</view>
			
			<!-- 训练设置区域 -->
			<view class="training-settings">
				<view class="settings-section">
					<view class="setting-row">
						<text class="section-title">选择数量</text>
						<view class="option-row">
							<view v-for="count in questionCounts" :key="count" class="option-item"
								:class="{ 'selected': selectedQuestionCount === count }" @click="selectQuestionCount(count)">
								<text>{{ count }}题</text>
							</view>
						</view>
					</view>
				</view>

				<view class="settings-section">
					<view class="setting-row">
						<text class="section-title">选择误差</text>
						<view class="option-row">
							<view v-for="range in errorRanges" :key="range" class="option-item"
								:class="{ 'selected': selectedErrorRange === range }" @click="selectErrorRange(range)">
								<text>±{{ range }}%</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<button class="start-btn" :disabled="selectedMethod === -1" @click="startTraining">开始训练</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				title: '特殊计算',
				
				// 方法选择
				selectedMethod: -1,
				
				// 训练设置
				questionCounts: [10, 20, 50],
				selectedQuestionCount: 10,
				errorRanges: [1, 2, 3, 4, 5],
				selectedErrorRange: 5,
				
				// 特殊计算方法
				calculationMethods: [{
						title: '尾数法',
						description: '通过观察数字尾数进行快速计算',
						example: '例：2317 + 1413 - 309 的尾数为7+3-9=1 ',
						type: 'tail-method'
					},
					{
						title: '凑整法',
						description: '将数字凑成整数便于计算',
						example: '例：198 + 297 = 200 + 300 - 5',
						type: 'round-method'
					},
					{
						title: '415份数法(百划分)',
						description: '利用415的特殊性质进行计算增量',
						example: '例：现期120，增长率33%，增量=120/(3+1)=30',
						type: 'proportion-method'
					},
					{
						title: '多位数相加',
						description: '三个三位或四位数的加减混合运算',
						example: '例：1234 + 567 - 890',
						type: 'multi-addition'
					},
					{
						title: '小增长率估增量法',
						description: '增长率绝对值小于5%时的增量估算',
						example: '例：现期1200，增长率3.2%，增量≈38.4',
						type: 'small-growth-estimation'
					},
					{
						title: '三位数乘几分之一',
						description: '三位数与分数的乘法运算',
						example: '例：300 × 1/4 = 75',
						type: 'threeDigitFraction1'
					},
					{
						title: '三位数乘几分之二',
						description: '三位数与分数的乘法运算',
						example: '例：300 × 2/5 = 120',
						type: 'threeDigitFraction2'
					},
					{
						title: '20以内分化百',
						description: '分数转换为百分数',
						example: '例：3/5 = 60%',
						type: 'fractionToPercentage'
					},
					{
						title: '三位数乘1.1',
						description: '三位数与1.1的乘法运算',
						example: '例：200 × 1.1 = 220',
						type: 'threeDigitMultiply1_1'
					},
					{
						title: '三位数乘0.9',
						description: '三位数与0.9的乘法运算',
						example: '例：200 × 0.9 = 180',
						type: 'threeDigitMultiply0_9'
					}
				]
			}
		},

		computed: {
			...mapState(['user', 'loginSuccess'])
		},

		methods: {
			...mapMutations(['emptyUserInfo']),
			
			// 选择计算方法
			selectMethod(index) {
				this.selectedMethod = index;
			},
			
			// 选择题目数量
			selectQuestionCount(count) {
				this.selectedQuestionCount = count;
			},
			
			// 选择误差范围
			selectErrorRange(range) {
				this.selectedErrorRange = range;
			},
			
			// 开始训练
			startTraining() {
				if (this.selectedMethod === -1) {
					uni.showToast({
						title: '请选择计算方法',
						icon: 'none'
					});
					return;
				}
				
				const method = this.calculationMethods[this.selectedMethod];
				
				// 跳转到统一的训练页面
				uni.navigateTo({
					url: `/pages/calculation/training/index?type=special&methodType=${method.type}&methodTitle=${encodeURIComponent(method.title)}&questionCount=${this.selectedQuestionCount}&errorRange=${this.selectedErrorRange}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.method-selection {
		width: 100%;
		padding: 0 15px;
		margin-top: 15px;
	}

	.method-cards {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-bottom: 20px;
	}

	.method-card {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-radius: 12px;
		padding: 18px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		border: 1px solid #f0f0f0;
	}

	.method-card.selected {
		border-color: #4CAF50;
		box-shadow: 0 2px 12px rgba(76, 175, 80, 0.2);
	}

	.method-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.method-title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 4px;
		display: block;
	}

	.method-desc {
		font-size: 14px;
		color: #666666;
		line-height: 1.4;
		margin-bottom: 6px;
		display: block;
	}

	.method-example {
		font-size: 12px;
		color: #999999;
		line-height: 1.3;
		display: block;
		font-style: italic;
	}

	/* 训练设置区域 */
	.training-settings {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin-bottom: 20px;
	}

	.settings-section {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	}

	.setting-row {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.section-title {
		font-size: 14px;
		font-weight: 600;
		color: #333;
		flex-shrink: 0;
		width: 70px;
		text-align: left;
	}

	.option-row {
		display: flex;
		gap: 6px;
		flex: 1;
		overflow-x: auto;
	}

	.option-item {
		padding: 6px 6px;
		border-radius: 6px;
		background-color: #f8f9fa;
		border: 1px solid #e9ecef;
		transition: all 0.2s ease;
		cursor: pointer;
		flex-shrink: 0;
		text-align: center;
		font-size: 13px;
		white-space: nowrap;
	}

	.option-item.selected {
		background-color: #e8f5e8;
		border-color: #4CAF50;
		color: #2e7d32;
		font-weight: 600;
	}

	.start-btn {
		width: 200px;
		padding: 14px;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		border: none;
		transition: all 0.2s ease;
		background-color: #4CAF50;
		color: white;
		margin: 10px auto 0;
		display: block;
	}

	.start-btn[disabled] {
		background-color: #cccccc;
		color: #666666;
	}



	/* 训练区域样式 */
	.training-area {
		margin-top: 20px;
	}

	.status-area {
		display: flex;
		padding: 0 15px;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.timer {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.score-board {
		display: flex;
		gap: 15px;
	}

	.score-item {
		text-align: center;
	}

	.score-label {
		font-size: 12px;
		color: #666;
		display: block;
		margin-bottom: 4px;
	}

	.score-value {
		font-size: 16px;
		font-weight: 600;
		display: block;
	}

	.score-value.correct {
		color: #4CAF50;
	}

	.score-value.wrong {
		color: #F44336;
	}

	.question-area {
		padding: 0 15px;
		margin-bottom: 20px;
	}

	.question-card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 25px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		text-align: center;
	}

	.question-header {
		margin-bottom: 15px;
	}

	.method-label {
		font-size: 14px;
		color: #4CAF50;
		font-weight: 600;
		background-color: #e8f5e8;
		padding: 6px 12px;
		border-radius: 20px;
		display: inline-block;
	}

	.question-text {
		font-size: 32px;
		font-weight: 600;
		color: #333;
		margin: 20px 0;
		line-height: 1.3;
		display: block;
	}

	.question-explanation {
		font-size: 14px;
		color: #666;
		margin: 15px 0;
		padding: 10px;
		background-color: #f8f9fa;
		border-radius: 8px;
	}

	.input-area {
		margin-top: 20px;
	}

	.input-area input {
		width: 100%;
		padding: 15px;
		font-size: 18px;
		border: 2px solid #e9ecef;
		border-radius: 8px;
		text-align: center;
		margin-bottom: 10px;
	}

	.error-range {
		font-size: 12px;
		color: #666;
		display: block;
	}

	/* 小键盘和震动开关 */
	.keyboard-vibration-switch {
		display: flex;
		justify-content: space-between;
		padding: 10px 20px;
		margin-bottom: 10px;
	}

	.switch-item {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.switch-item text {
		font-size: 14px;
		color: #666;
	}

	/* 数字键盘 */
	.number-keyboard-wrapper {
		display: flex;
		justify-content: center;
		padding: 0 20px;
	}

	.number-keyboard {
		width: 100%;
		max-width: 300px;
		transition: transform 0.3s ease;
	}

	.keyboard-row {
		display: flex;
		gap: 10px;
		margin-bottom: 10px;
	}

	.key {
		flex: 1;
		padding: 15px;
		font-size: 18px;
		border: 1px solid #ddd;
		border-radius: 8px;
		background-color: #f8f9fa;
		color: #333;
		transition: all 0.1s ease;
	}

	.key:active {
		background-color: #e9ecef;
		transform: scale(0.95);
	}

	.key.delete {
		background-color: #ffc107;
		color: white;
	}

	.key.clear {
		background-color: #17a2b8;
		color: white;
	}

	.key.confirm {
		background-color: #28a745;
		color: white;
	}

	/* 总结区域 */
	.summary-area {
		padding: 20px;
	}

	.summary-header {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.summary-stats {
		display: flex;
		justify-content: space-between;
	}

	.stat-item {
		text-align: center;
		flex: 1;
	}

	.stat-label {
		font-size: 14px;
		color: #666;
		margin-bottom: 8px;
		display: block;
	}

	.stat-value {
		font-size: 18px;
		font-weight: 600;
		color: #333;
		display: block;
	}

	.stat-value.high-score {
		color: #4CAF50;
	}

	.stat-value.medium-score {
		color: #FF9800;
	}

	.stat-value.low-score {
		color: #F44336;
	}

	.summary-content-wrapper {
		background-color: #ffffff;
		border-radius: 12px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		overflow: hidden;
	}

	.summary-content {
		max-height: 400px;
		overflow-y: auto;
	}

	.record-header {
		display: flex;
		background-color: #f8f9fa;
		padding: 12px;
		border-bottom: 1px solid #e9ecef;
		font-weight: 600;
		color: #495057;
	}

	.record-header text {
		flex: 1;
		text-align: center;
		font-size: 14px;
	}

	.question-record {
		display: flex;
		padding: 12px;
		border-bottom: 1px solid #f8f9fa;
		min-height: 50px;
		align-items: center;
	}

	.question-record text {
		flex: 1;
		text-align: center;
		font-size: 13px;
		color: #495057;
		line-height: 1.4;
	}

	.question-record.correct {
		background-color: #f8fff8;
	}

	.question-record.wrong {
		background-color: #fff8f8;
	}

	.restart-btn {
		flex: 1;
		padding: 14px;
		background-color: #4CAF50;
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		margin: 0 5px;
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.method-card {
			padding: 15px;
		}
		
		.method-icon {
			width: 40px;
			height: 40px;
			margin-right: 12px;
		}
		
		.method-title {
			font-size: 16px;
		}
		
		.method-desc {
			font-size: 13px;
		}
		
		.method-example {
			font-size: 11px;
		}
		
	}
</style>